<template>
    <div class="section_common">
        <div class="main">
            <el-form ref="form" label-width="100px">
                <el-form-item label="入职日期">
                    <el-input v-model="entryDate" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="工号">
                    <el-input v-model="jobnum" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="user" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="区域">
                    <el-input v-model="area" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="部门名">
                    <el-input v-model="deptName" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="消息周期">
                    <el-input v-model="cycle" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="面试性格评价">
                    <el-input v-model="evaluation" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="导师" required>
                    <el-select v-model="mentor" multiple :filterable="true" size="mini" placeholder="请选择">
                        <el-option v-for="(item,index) in mentors" :key="index" :label="item.label" :value="item.value">

                        </el-option>
                    </el-select>
                </el-form-item>
                <!--<div id="multipleMain" class="fd-main select1">
                    <div class="input_left">导师</div>
                    <div class="input_right">
                        <div :class="[{'fd-select-body-buttom': !flag}, {'fd-select-body': flag}]" @click="selectClick">
                            <input class="fd-content" v-model="currentCheckNr" type="text"/>
                        </div>
                        &lt;!&ndash;<div class="fd-down">
                            <ul class="fd-list" v-show="flag">
                                <li class="fd-list-children"  :class="{'fd-checked': isActive(item.userId)}" v-for="item in cityList"
                                    :key="item.userId" @click="clickLi(item)">{{item.name}}</li>
                            </ul>
                        </div>&ndash;&gt;
                        <van-popup v-model="flag" position="right" style="height: 100%">
                            <ul class="fd-list" v-show="flag">
                                <li class="fd-list-children"  :class="{'fd-checked': isActive(item.userId)}" v-for="item in cityList"
                                    :key="item.userId" @click="clickLi(item)">{{item.name}}</li>
                            </ul>
                        </van-popup>
                    </div>

                </div>-->

                <el-form-item label="面试评级" required>
                    <el-select v-model="rate" size="mini" placeholder="请选择">
                        <el-option label="A+" value="A+">A+</el-option>
                        <el-option label="A" value="A">A</el-option>
                        <el-option label="B" value="B">B</el-option>
                        <el-option label="B-" value="B-">B-</el-option>
                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button v-bind:disabled="isShow" type="primary" size="mini" @click="submitPost"
                    >{{message}}</el-button
                    >
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>
<script>

    import Vue from 'vue';
    import {Toast,Picker,Popup,Dialog} from 'vant';
    Vue.use(Picker);
    Vue.use(Popup);
    Vue.use(Dialog)


    export default {

        data() {
            return {
                id:"",//入职管理对应的id
                entryDate: "",//入职时间
                jobnum:"",
                user:"",//用户名
                area:"",//工作区域
                deptName:"",
                cycle:"",//消息周期
                rate:"",//面试评级
                evaluation:"",//面试性格评价
                mentor:[],
                mentors:[
                    /*{label:'张三',value:'3'},
                    {label:'张4',value:'4'},
                    {label:'张5',value:'5'},
                    {label:'张6',value:'6'},
                    {label:'张7',value:'7'}*/],//导师

                title: "销售部入职管理",
                editManagement: '/mobiles/editManagement',

                isShow:false,
                message:"提交",

                cityList: [],
                flag: false,
                clickFlag: false,
                currentIndex: '',
                currentChecked: [],
                currentCheckedParams: [],
                isExist: false
        };
        },

        mounted() {
            // eslint-disable-next-line consistent-this
            const that = this;
            // 用于监听点击 非本区域 也就是点击这个组件以外的任意地方
            document.addEventListener('click', e => {
                if (!that.$el.contains(e.target)) {
                    that.flag = false;
                }
            });
        },

        created() {
            this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
            this.id= this.$route.params.id;
            this.getManagementInfo();
            this.selMentor();//获取导师的相关信息
        },

        /*computed: {
            // 选中的这个数组中有内容的时候显示选中的内容 没有任何内容的时候 就显示文字提示
            currentCheckNr() {
                return this.currentChecked.length === 0 ? '请选择' : this.currentChecked;
            }
        },*/

        methods: {

            //根据入职管理的id找到相对应的入职管理详情
            getManagementInfo(){
                this.$https.post('/mobiles/getManagementInfo',{
                    nowUser:this.nowUser,
                    id:this.id
                }).then((res)=>{
                    console.log(res.data.data);
                    this.entryDate=res.data.data.entryDate;
                    this.jobnum=res.data.data.jobnum;
                    this.user=res.data.data.user;
                    this.area=res.data.data.area;
                    this.deptName=res.data.data.deptName;
                    this.cycle=res.data.data.cycle;
                    this.rate=res.data.data.rate;
                    this.evaluation=res.data.data.evaluation;

                    if (res.data.data.users!=null){
                        this.mentor=res.data.data.userNames;
                        //this.mentors=res.data.data.users;
                        /*this.formatLacation(res.data.data.users,this.mentors,'name','userId');*/
                        /*this.currentCheckedParams=res.data.data.users;*/
                    }

                    if (res.data.data.submit=='0'){
                        this.isShow=true;
                        this.message="已评价";
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            formatLacation(data,curr,foo,id){
                if(data){
                    console.log(foo)
                    for(let i=0;i<data.length;i++){
                        console.log(data[i])
                        curr.push({
                            label:data[i][foo],
                            value:data[i][id],
                        })
                    }
                    console.log(curr)
                }
            },
            //获取对应的销售部人员的信息
            selMentor(){
                this.mentors=[];
                this.$https.post('/mobiles/selMentor',{
                    id:this.id
                }).then((res)=>{
                    //debugger
                    //this.cityList=res.data.data.data;
                    //this.mentors=res.data.data.data;
                    this.formatLacation(res.data.data.data,this.mentors,'name','userId');
                    //console.log(this.mentors)
                }).catch(err => {
                    console.log(err);
                })
            },

            /*// 是否展示下拉框的方法
            selectClick() {
                this.flag = !this.flag;
            },
            // 单击选择某一项
            clickLi(item) {
                this.isExist = false;
                this.clickFlag = !this.clickFlag;
                for (const index in this.currentChecked) {
                    // 已经选中了 再次点击 就是取消 从选中的列表中移除
                    if (this.currentChecked[index] === item.name) {
                        this.currentChecked.splice(index, 1);
                        this.currentCheckedParams.splice(index, 1);
                        this.isExist = true;
                    }
                }
                // 不存在就把选择的对象名称放入currentChecked用于显示选中的中文项 对象存入currentCheckedParams中用于保存
                if (!this.isExist) {
                    this.currentIndex = item.userId;
                    this.currentChecked.push(item.name);
                    this.currentCheckedParams.push(item);
                    console.log(this.currentIndex)
                    console.log(this.currentChecked)
                    console.log(this.currentCheckedParams)
                }
                // 判断选中的对象是否激活
                this.isActive(item.userId);
            },
            isActive(userId) {
                for (const index in this.currentCheckedParams) {
                    if (this.currentCheckedParams[index].userId === userId) {
                        return true;
                    }
                }
                return false;
            },*/


            // 返回
            goBack() {
                this.$router.go(-1);
            },
            // 提交
            submitPost() {

                this.$https.post(this.editManagement, {
                    userId:this.nowUser,
                    id:this.id,
                    rate:this.rate,
                    mentor:this.mentor,

                }).then(() => {
                    Toast("推送成功");
                    this.isShow=true;
                    this.message="已提交";
                    //this.$router.go(-1);
                }).catch(err => {
                    console.log(err)
                });
            },
            //判断相关数据是否为空
            isNull() {
                if (this.rate == '') {
                    this.$toast("面试评级不能为空");
                    return false;
                }
                if (this.mentor == '') {
                    this.$toast("请选择导师");
                    return false;
                }

                return true;
            },

        },
    };
</script>

<style lang="scss" scoped>
    .main {
        background-color: white;
        .el-form {
            padding-right: 10px;
            .el-form-item {
                .el-form-item__label {
                    line-height: 16px;
                }
                margin-bottom: 5px;
            }
        }
    }
</style>
